<template>
  <!-- 安全合规 -->
  <div>
    <!--    轮播图-->
    <Rotation :list-data="bannerList"/>
    <div style="width: 80%;margin: 140px auto;">
      <div class="safetyNav">
        <div class="safetyImg">
          <img src="@/assets/images/safety/xitonganquan.png" alt="">
        </div>
        <div class="font">
          <h2 >系统安全性</h2>
          <div class="lineColor"></div>
        </div>
      </div>
      <div style="display: flex;flex-wrap: wrap;justify-content: space-evenly">
        <div v-for="(item,index) in system_security" :key="index" class="safecon" v-animate="'queue-bottom'">
          <div class="safetyImage">
            <img :src="item.src" alt="">
          </div>
          <div class="safeText">
            <div class="itemTitle">{{ item.title }}</div>
            <div class="itemLine"></div>
            <div>{{ item.text }}</div>
          </div>
        </div>
      </div>
      <div class="safetyNav" style="margin-top: 0.5rem">
        <div class="safetyImg">
          <img src="@/assets/images/safety/falvxiaoli.png" alt="">
        </div>
        <div class="font" >
          <h2>法律效力</h2>
          <div class="lineColor"></div>
        </div>
      </div>
      <div>
        <div class="legalEffect" v-animate="'queue-bottom'">
          <div class="item" >
            <div class="num">01</div>
            <div class="content">
              <h2>《中华人民共和国电子签名法》</h2>
              <div class="title">明确电子签名的合法效力</div>
              <p>第十三条：<br>
              <p>电子签名同时符合下列条件的，视为可靠的电子签名：</p>
              <p>(一)电子签名制作数据用于电子签名时,属于电子签名人专有；</p>
              <p>(二)签署时电子签名制作数据仅由电子签名人控制；</p>
              <p>(三)签署后对电子签名的任何改动能够被发现；</p>
              <p>(四)签署后对数据电文内容和形式的任何改动能够被发现当事人也可以选择使用符合其约定的可靠条件的电子签名。</p>
              <p style="margin-top: 0.2rem">第十四条：<br>
              可靠的电子签名与手写签名或者盖章具有同等的法律效力。</p>
            </div>
          </div>
          <div class="itemCenter" v-animate="'queue-bottom'">
            <div class="Center">
              <div class="num numTwo">02</div>
              <div class="content">
                <h2>《中华人民共和国电子签名法》</h2>
                <div class="title">认可了数据电文的书面形式属性</div>
                <p>第十条：</p>
                <p>当事人订立合同，有书面形式、口头
                  形式和其他形式。</p>
                <p>第十一条：</p>
                <p>书面形式是指合同书、信件和数据电
                  文（包括电报、电传、传真、电子数
                  据交换和电子邮件）等可以有形地表
                  现所载内容的形式。</p></div>
            </div>
            <div class="renKe">
              速裁通电子合同产品受司法认可
              <img src="@/assets/images/safety/right.png" alt="">
            </div>

          </div>
          <div class="item" v-animate="'queue-bottom'">
            <div class="num">03</div>
            <div class="content">
              <h2>《中华人民共和国电子签名法》</h2>
              <div class="title">明确将电子数据纳入民事诉 <br>
                讼证据界定民事诉讼证据类<br>
                型的电子数据</div>

              <div style="margin-top: 0.2rem">第六十三条：<br>
                证据包括：<br>
                （一）当事人的陈述；<br>
                （二）书证；<br>
                （三）物证；<br>
                （四）视听资料；<br>
                （五）电子数据；<br>
                （六）证人证言；<br>
                （七）鉴定意见；<br>
                （八）勘验笔录。</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Rotation from "@/components/Rotation";

export default {
  name: "safety",
  components: {
    Rotation,
  },
  data() {
    return {
      system_security: [
        {
          src: require("@/assets/images/safety/renzheng.png"),
          title: '严谨的身份认证',
          text: '对于个人用户：速裁通采用公安部EID电子身份系统实时在线认证身份，确保签约方的真实实名身份； 对于企业法人用户：速裁通通过与工商系统对接认证企业法人的真实身份。'
        },
        {
          src: require("@/assets/images/safety/zhengshu.png"),
          title: '权威CA颁发数字证书',
          text: '速裁通对接权威CA中心，确保通过数字证书认证的签名是合法有效的。数字证书提供了一种在 INTERNET上验证身份的方式。其作用类似于司机的驾驶执照或日常生活中的身份证。'
        },
        {
          src: require("@/assets/images/safety/anquan.png"),
          title: '银行级别的安全保护',
          text: '速裁通采用银行级别的安全保护手段，从底层服务架构到前端业务逻辑设计和开发，全方位保障您与客户之间协议签署的安全。'
        },
        {
          src: require("@/assets/images/safety/yincang.png"),
          title: '您的信息仅您可见',
          text: '与CA中心对接，通过数字证书加密，只有具有真实有效的数字电子证书才能打开浏览，即使速裁通内部技术人员也无法看到您的合同内容。'
        },
        {
          src: require("@/assets/images/safety/jiami.png"),
          title: '防篡改加密手段',
          text: '加密标准：SHA-256散列技术验证的文件不会被修改，使您能够验证文件的真实性和无篡改。即使是速裁通内部人员也无法修改您的文档，确保每次访问一份文件时，它均不被修改。'
        },
        {
          src: require("@/assets/images/safety/beifen.png"),
          title: '周全的备份策略',
          text: '速裁通提供银行交易级别的金融安全备份，除了本地备份还有异地备份，同城双活、异地容灾，确保所有客户的数据安全完整，我们为您提供领先的安全性存储环境。'
        },
        {
          src: require("@/assets/images/safety/anquancunchu.png"),
          title: '金融级安全存储',
          text: '速裁通上的所有文档都使用AES标准的256位SSL加密文件传输，以防止篡改，保证真实性和有效性，从您的文件进入我们的系统，便瞬间加密，并且我们确保只有指定的用户才能访问文件。'
        },
        {
          src: require("@/assets/images/safety/fenbu.png"),
          title: '分布式存储',
          text: '通过联合多方（包括司法鉴定中心、仲裁委等机构）共同建立司法证据保全联盟链，实现去中心化的证据永久固化保存，同时简化传统证据取证出证流程。分布式区块链证据保全技术，确保合同证据无法篡改。'
        }
      ],
      bannerList: [{
        a: '安全合规',
        b: '遵循国家相关法律法规进行研发设计 为您的电子签署提供银行级别的安全防护',
        c: '免费试用',
        d: '更多信息',
        src: require("@/assets/images/safety/Pic.png")
      },
        {
          a: '安全合规',
          b: '遵循国家相关法律法规进行研发设计 为您的电子签署提供银行级别的安全防护',
          c: '免费试用',
          d: '更多信息',
          src: require("@/assets/images/safety/Pic.png")
        },
        {
          a: '安全合规',
          b: '遵循国家相关法律法规进行研发设计 为您的电子签署提供银行级别的安全防护',
          c: '免费试用',
          d: '更多信息',
          src: require("@/assets/images/safety/Pic.png")
        },
        {
          a: '安全合规',
          b: '遵循国家相关法律法规进行研发设计 为您的电子签署提供银行级别的安全防护',
          c: '免费试用',
          d: '更多信息',
          src: require("@/assets/images/safety/Pic.png")
        },
      ],
    };
  },
}
</script>

<style scoped lang="less">
.safetyNav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;

}

.item {
  background-color: #EEEEEE;
  width: 396px;
  padding-bottom: 40px;

}

.safecon {
  margin-right: 38px;
  display: flex;
  justify-content: space-between;
  margin-top: 57px
}

.num {
  width: 120px;
  height: 121px;
  position: relative;
  left: 10%;
  font-size: 80px;
  color: white;
  line-height: 165px;
  text-align: center;
  background-color: #2A3948;
  margin-top: -15px;
}

.numTwo {
  background-color: #1DD2AF;
  top: -5%;
}

.title {
  text-align: center;
  font-size: 22px;
}

p {
  padding: 0;
  margin: 0;
}

.itemTitle {
  font-size: 24px;
}

.itemLine {
  width: 26px;
  background: #1DD2AF;
  margin: 11px 0;
  height: 4px;
}

.safetyImg {

  img {
    width: 71px;
    height: 71px;
    vertical-align: middle;
  }
}

.safetyImage {
  width: 130px;
  height: 130px;
  margin-right: 19px;
  border: 3px solid #1DD2AF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 85px;
    height: 85px;
  }
}

.safeText {
  width: 410px;
  color: #000000;
}

.font {
  margin-left: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  h2{
    font-size: 32px;
  }
}

.lineColor {
  width: 69px;
  height: 2px;
  background-color: #1DD2AF;
  margin-top: 0px;
}

.legalEffect {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  padding-top: 60px;
  margin-bottom: 50px;
}

.itemCenter {
  background-color: #ffffff;
  width: 472px;
  margin: 0 30px;
  position: relative;

  .Center {
    background-color: #2A3948;
    color: white;
     height: 85%;

  }
}

.content {
  padding: 0 30px;
  font-size: 18px;
  opacity: 0.8;
p{
  margin-bottom: 10px;
}
}

h2 {
  font-size: 24px;
}

.renKe {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  position: absolute;
  left: 7%;
  bottom: 0;
  border: #1DD2AF solid 1px;
  width: 400px;
  font-size: 22px;
  border-radius: 15px;
  img{
    width: 40px;
    height: 35px;
  }
}


</style>
